<template>
    <view class="page">
        <view class="content">
            <view class="sliver-header" v-if="info.room_img.length===0">
                <u-gap height="50"></u-gap>
                <u--text color="#fff" size="17" text="无审核通过房间照片，房源将无法进行展示哦"></u--text>
                <u-gap height="30"></u-gap>
                <template v-if="isUpdate">
                    <u-upload
                            :fileList="zmImgList"
                            @afterRead="afterRead"
                            @delete="deletePic"
                            name="zm"
                            multiple
                            :maxCount="4"
                    >
                        <u-button type="primary" :plain="true" :hairline="true" size="small" text="添加照片"></u-button>
                    </u-upload>
                </template>
            </view>
            <!--<view class="sliver-header" >-->
            <u-swiper v-else
                    :list="info.room_img"
                    @change="e => this.currentNum = e.current"
                    indicatorStyle="right: 20px"
                    height="400rpx"
            ></u-swiper>
            <!--</view>-->

            <u--text type="info" margin="8px 0 8px 0" text="只有将房源信息填写完整才会对外展示"></u--text>

            <u-cell-group v-if="isUpdate">
                <u-cell title="门牌号" :value="info.building + '栋' + info.unit + '单元' + info.room_num + house_name"></u-cell>
                <u-cell title="对外标价">
                    <view slot="value" class="slot-row">
                        <u-input border="surround" clearable v-model="price"></u-input>
                        <text>元/月</text>
                    </view>
                </u-cell>
                <u-gap height="20"></u-gap>
                <u-cell title="出租状态">
                    <view slot="value" class="slot-row">
                        <text>{{!rent_type ? '未出租' : '已租'}}</text>
                        <u-switch v-model="rent_type" activeColor="#5ac725"></u-switch>
                    </view>
                </u-cell>
            </u-cell-group>

            <u-cell-group v-else>
                <u-cell title="门牌号" :value="info.building + '栋' + info.unit + '单元' + info.room_num + house_name"></u-cell>
                <u-cell title="对外标价" :value="price + '元/月'"></u-cell>
                <u-gap height="20"></u-gap>
                <u-cell title="出租状态" :value="!rent_type ? '未出租' : '已租'"></u-cell>
            </u-cell-group>
        </view>

        <view style="width:100%;height: 100px;background-color: #fff;position: fixed;bottom: 1px">
            <u-row v-if="isUpdate">
                <u-button type="default" text="删除" @click="deleteHouse"></u-button>
                <u-modal :show="modalShow" :content='modalContent' @confirm="modalConfirm" showCancelButton showConfirmButton @cancel="modalCancel"></u-modal>

                <u-button type="primary" text="保存" @click="save"></u-button>
            </u-row>
            <u-row v-else>
                <u-button type="default" text="修改" v-if="info.rent_type===1" @click="updateHouse"></u-button>
                <u-button type="default" :plain="true" v-if="info.type===2" text="添加房间" @click="addRoom"></u-button>
                <u-button type="primary" text="租客登记" v-if="info.rent_type===1" @click="tenantRegister"></u-button>
                <u-button type="primary" text="查看租约" v-if="info.rent_type===2" @click="checkLease"></u-button>
            </u-row>

            <view class="safe-area-inset-bottom"></view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "detail",
        data(){
          return {
              zmImgList:[],
              currentNum: 0, //轮播图默认展示index
              info:{
                  join_room_name: "1009-A",
                  room_num:'333',
                  rent_price: "300",
                  type: 2,
                  rent_type: 1,
                  text: "当前已空置29天了",
                  owe: "2",
                  room_img:[],
              },

              isUpdate: false,


              house_name: '',
              price: '',
              rent_type: '',

              modalShow: false,
              modalContent: '确认删除？'
          };
        },
        onLoad(option){
            this.info = JSON.parse(option.info);
            console.log(this.info);

            this.house_name = this.info.join_room_name === '' ? '' :  '（' + this.info.join_room_name + '）';
            this.price = this.info.lease_priec;
            this.rent_type = parseInt(this.info.rent_type) !== 1;

            if (!Array.isArray(this.info.room_img)) {
                this.info.room_img = [this.info.room_img];
            }

            this.info.room_img = this.info.room_img.concat(this.info.join_public_img).filter(function (item) {
                return item;
            });

        },
        methods:{
            // 删除图片
            deletePic(event) {
                this[`${event.name}ImgList`].splice(event.index, 1)
            },
            // 新增图片
            async afterRead(event) {
                // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
                let lists = [].concat(event.file)
                let fileListLen = this[`${event.name}ImgList`].length
                lists.map((item) => {
                    this[`${event.name}ImgList`].push({
                        ...item,
                        status: 'uploading',
                        message: '上传中'
                    })
                })
                for (let i = 0; i < lists.length; i++) {
                    const result = await this.uploadFilePromise(lists[i].url)
                    let item = this[`${event.name}ImgList`][fileListLen]
                    this[`${event.name}ImgList`].splice(fileListLen, 1, Object.assign(item, {
                        status: 'success',
                        message: '',
                        url: result
                    }))
                    fileListLen++
                }
            },
            uploadFilePromise(url) {
                let server = this.$url + '/api.php/index/file_update';
                return new Promise((resolve, reject) => {
                    uni.uploadFile({
                        url: server,
                        filePath: url,
                        name: 'image[]',
                        success: (res) => {
                            let resp = JSON.parse(res.data);
                            setTimeout(() => {
                                resolve(resp.data.img_url[0]);
                            }, 1000)
                        }
                    });
                })
            },

            addRoom(){
                uni.navigateTo({url: '/pages/landlord/library/addroom?h_id=' + this.info.id});
            },
            checkLease(){
                let data = {h_id: this.info.id, z_id: this.info.z_id};
                uni.navigateTo({url:'/pages/landlord/library/lease' + uni.$u.queryParams(data)});
            },
            tenantRegister(){
                let s_name = this.info.s_name + '-' + this.info.building + '栋' + this.info.unit + '单元' + this.info.room_num;
                let data = {h_id: this.info.id,s_name: s_name,z_id: this.info.z_id};
                uni.navigateTo({url:'/pages/landlord/library/tenant' + uni.$u.queryParams(data)});
            },

            deleteHouse(){
                this.modalShow = true;
            },
            modalConfirm(){
                // 删除房屋
                let data = {
                    type: 2,
                    h_id: this.info.id,
                };
                uni.showLoading({title: '正在删除'});
                uni.$u.http.post('/api.php/House/house_set', data).then(res => {
                    uni.hideLoading();
                    this.modalCancel();
                    uni.navigateBack({delta: 1});
                });
            },
            modalCancel(){
                this.modalShow = false;
            },

            updateHouse(){
                // 点击修改 页面布局应该改变
                this.isUpdate = true;
            },

            save(){
                // 执行保存action
                let data = {
                    type : 1,
                    h_id: this.info.id,
                };
                if (this.zmImgList.length > 0){
                    data.room_img = this.zmImgList.join();
                }
                // 名称这里不改 白做了
                // if (this.house_name !== this.info.join_room_name){
                //     data.house_name = this.house_name;
                // }

                if (this.price !== this.info.lease_priec){
                    data.price = this.price;
                }
                data.rent_type = this.rent_type ? 2 : 1 ;

                uni.showLoading({title: '正在保存'});
                uni.$u.http.post('/api.php/House/house_set', data).then(res => {
                    uni.hideLoading();
                    uni.navigateBack({delta: 1});
                });

                this.isUpdate = false;
            },
        }
    }
</script>

<style lang="scss" scoped>
    .page {
        width: 100%;
        min-height: 100vh;
        background-color: $u-bg-color;
    }
    .content{
        padding: 20rpx;
    }

    .sliver-header{
        height: 400rpx;
        background-color: #3F536E;
        display: flex;
        flex-direction: column;
        align-items:center;
    }

    .slot-row{
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    /deep/.u-cell{
        background-color: #ffffff;
    }
</style>